<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>查看日志</title>
		<!--引入layui的css  -->
		<link rel="stylesheet" href="../layui/css/layui.css" />
	</head>
	<!--引入layui的js  -->
	<script type="text/javascript" src="../layui/layui.js"></script>
	<!--引入jquery的js  -->
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/global.js"></script>

	<!-- 开关1（既能开也能关） -->
	<script type="text/html" id="switchBar1">
		<input type="checkbox" data-id="{{d.id}}" name="isread" lay-filter="isLockSwitch" lay-skin="switch" lay-text="已读|未读" {{d.isread=="1" ? "checked": ""}}>
	</script>

	<body>
		<!-- 查询条件输入框 -->
		<div class="layui-form-item" style="margin-top: 10px;">
			<form class="layui-form" onsubmit="return false;">
				<label class="layui-form-mid">发送时间:</label>
				<div class="layui-input-inline" style="width: 170px;">
					<input type="text" id="sendtime" name="sendtime" placeholder="yyyy-MM-dd HH-mm-ss" autocomplete="off" class="layui-input">
				</div>
				<label class="layui-form-mid">--</label>
				<div class="layui-input-inline" style="width: 170px;">
					<input type="text" id="endDate" name="endDate" placeholder="yyyy-MM-dd HH-mm-ss" autocomplete="off" class="layui-input">
				</div>

				<div class="layui-input-inline" style="width: 300px;">
					<button class="layui-btn" lay-submit lay-filter="search" id="search" data-type="reload"><i
							class="layui-icon">&#xe615;</i>搜索</button>
					<a class="layui-btn layui-btn-small" style="line-height:1.6em;" href="javascript:location.replace(location.href);" title="刷新">
						<i class="layui-icon" style="line-height:38px">&#xe666;</i>
					</a>
				</div>
			</form>
		</div>

		<!--定义数据表格table  -->
		<table class="layui-hide" id="proTable" lay-filter="filterTable"></table>

		<script>
			layui.use(['laydate', 'layer', 'form', 'table', 'tree', 'upload', 'transfer', 'layedit'], function() {
				var laydate = layui.laydate //日期组件
					,
					layer = layui.layer //弹层组件
					,
					form = layui.form //表单组件
					,
					upload = layui.upload //上传组件
					,
					tree = layui.tree //树形结构组件
					,
					$ = layui.$ //jQuery
					,
					table = layui.table,
					layedit = layui.layedit, //文本域
					transfer = layui.transfer; //表格组件

				//日期控件
				laydate.render({
					elem: '#sendtime',
					type: 'datetime'
				});
				laydate.render({
					elem: '#endDate',
					type: 'datetime'
				});

				//渲染表格，填充数据
				table.render({
					elem: '#proTable', //对应上面定义的表格ID
					url: "" + globalData.server + "message/selectMseeageAll", //提交到后台的地址
					method: 'post', //提交方式 get或者post
					where: {
						"receiverid": globalData.getCurUid(),
						"token": globalData.token
					},
					even: true, //表格隔行变色
					page: true, //开启分页
					toolbar: false, //开启头部工具栏，并为其绑定左侧模板
					title: '产品表', //表格名称
					cols: [
						[{
							field: 'id', //对应实体类里的属性    （必需有）
							fixed: 'left', //固定方式，left左固定，right右固定 （可选）
							align: 'center', //排列方式：left左对齐，center居中，right右对齐（可选）
							title: '学生id', //表头名称			（必需有）
							sort: true,
							width: 100 //开启排序（可选）
						}, {
							field: 'sendername', //对应实体类里的属性
							title: '发送人姓名', //表头名称
							width: 100 //
						}, {
							field: 'content',
							title: '内容',
							width: 300
						}, {
							field: 'status',
							title: "是否读取",
							width: 120,
							sort: true,
							align: 'center',
							toolbar: '#switchBar1'
						}]
					]
				});

				/*
					条件查询	submit 对应 lay-submit  search 对应 lay-filter
				*/
				form.on('submit(search)', function(data) {
					var field = data.field; //获取所有的输入条件值
					//执行重载
					table.reload('proTable', {
						page: {
							curr: 1
						}, // 重载后回到第一页
						where: field // 把所有的输入值传给后台
					});
				});

				// 处理开关点击时把信息传入到后台进行修改（isLockSwitch写对应开关的lay-filter值即可）
				form.on('switch(isLockSwitch)', function(data) {
					var id = $(this).attr('data-id'); //获得当前点击对象的id值
					var valid = this.checked ? 'on' : 'off'; //获取到点击后的开关状态（on/off）
					var x = data.elem.checked; //获取到点击后的开关状态（true/false）
					layer.open({
						content: '确定要修改状态吗？', //给用户的友好提示
						btn: ['确定', '取消'],
						yes: function(index, layero) {
							data.elem.checked = x;
							layer.close(index);
							$.ajax({
								type: "POST",
								url:  "" + globalData.server + "message/updateMessageIsRead/" + id + "/" + valid,
								data: {"token": globalData.token},
								/* "id" : id , "valid" : valid */
								success: function(res) {
									if(res) {
										layer.msg("修改成功！");
									} else {
										layer.msg("修改失败！");
									}
									form.render();
									window.location.reload();
								},
								error: function() {
									window.location.reload();
								}
							});
						}
					});
					return false;
				});

			});
		</script>
	</body>

</html>